<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>预约参观</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
    </script>
    <!-- Bootstrap -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
        function selectZone(xm,yq,name) {
            $("#locationImg").show();
            url1 = "https://mobile.aowo.vip/images/hb/"+ xm + "/" + yq + "1.jpg";
            url2 = "https://mobile.aowo.vip/images/hb/"+ xm + "/" + yq + "2.jpg";
            url3 = "https://mobile.aowo.vip/images/hb/"+ xm + "/" + yq + "3.jpg";

            $("#f1").attr("src", url1);
            $("#f2").attr("src", url2);
            $("#f3").attr("src", url3);

            $("#appointmentPlace").val(name);
        }

        function appointment() {
            $.ajax({
                type: "POST",
                url: "saveAppointment",
                data: {appointmentPlace:$("#appointmentPlace").val(),appointmentName:$("#appointmentName").val(), appointmentTel:$("#appointmentTel").val(), appointmentTime:$("#appointmentTime").val()},
                success: function(data){
                    if(data.sucess){
                        alert(data.msg);
                    }else {
                        alert(data.msg);
                    }
                }
            });
        }

    </script>
</head>
<body>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>现场参观预约</h3>
    </div>
    <div class="panel-body">
    <div class="row">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                俊发 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" onclick="selectZone('jf','yj','俊发城郁金苑')">郁金苑</a></li>
                <li><a href="#" onclick="selectZone('jf','fr','俊发城芙蓉苑')">芙蓉苑</a></li>
                <li><a href="#" onclick="selectZone('jf','jz','俊发城金盏苑')">金盏苑</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#" onclick="selectZone('jf','zc','俊发城逸天峰')">逸景峰</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                中海 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" onclick="selectZone('zh','jy','中海锦苑')">中海锦苑</a></li>
                <li><a href="#" onclick="selectZone('zh','gg','龙泉公馆')">龙泉公馆</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                润城 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" onclick="selectZone('rc','1','润城一区')">润城一区</a></li>
                <li><a href="#" onclick="selectZone('rc','4','润城四区')">润城四区</a></li>
                <li><a href="#" onclick="selectZone('rc','5','润城五区')">润城五区</a></li>
                <li><a href="#" onclick="selectZone('rc','7','润城七区')">润城七区</a></li>
                <li><a href="#" onclick="selectZone('rc','11','润城十一区')">润城十一区</a></li>
                <li><a href="#" onclick="selectZone('rc','1d','润城一大道')">润城一大道</a></li>
                <li><a href="#" onclick="selectZone('rc','4d','润城四大道')">润城四大道</a></li>
                <li><a href="#" onclick="selectZone('rc','5d','润城五大道')">润城五大道</a></li>
            </ul>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                银海 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" onclick="alert('暂未开放预约，请现场参观')">银海尚御</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                融创 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" onclick="alert('暂未开放预约，请现场参观')">暂未开放</a></li>
            </ul>
        </div>
    </div>
        <!--图片-->
        <div id="locationImg" style="display: none">
            <img src="" class="img-responsive" alt="Responsive image" id="f1">
            <img src="" class="img-responsive" alt="Responsive image" id="f2">
            <img src="" class="img-responsive" alt="Responsive image" id="f3">
        </div>
        <form>
            <div class="form-group">
                <label class="control-label" for="inputSuccess1">预约苑区</label>
                <input type="text" class="form-control" id="appointmentPlace" disabled="disabled">
            </div>
            <div class="form-group">
                <label class="control-label" for="inputSuccess1">尊姓大名</label>
                <input type="text" class="form-control" id="appointmentName" placeholder="尊姓大名">
            </div>
            <div class="form-group">
                <label class="control-label" for="inputSuccess1">联系方式</label>
                <input type="text" class="form-control" id="appointmentTel" placeholder="电话号码">
            </div>
            <div class="form-group">
                <label class="control-label" for="inputSuccess1">莅临时间</label>
                <input type="text" class="form-control" id="appointmentTime" placeholder="莅临时间">
            </div>

            <div style="align-content: center">
                <button type="submit" class="btn btn-success" onclick="appointment()">预约</button>
            </div>

        </form>
    </div>
</div>
</body>
</html>
